<script setup>
import { ref, computed } from 'vue';
import { useLogStore } from "@/stores/logStore.js";
import * as echarts from 'echarts';

const logStore = useLogStore();
const dialogVisible = ref(false);
const chartRef = ref(null);
let chartInstance = null;

// 显示对话框并加载统计数据和图表
const show = () => {
  dialogVisible.value = true;
  logStore.getStatistics().then(() => {
    nextTick(() => {
      initChart();
    });
  });
};

// 关闭对话框
const close = () => {
  dialogVisible.value = false;
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
};

// 初始化图表
const initChart = () => {
  if (!logStore.statisticsData) return;

  chartInstance = echarts.init(chartRef.value);

  const option = {
    title: {
      text: '操作日志统计',
      subtext: logStore.statisticsData.timeRange,
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '操作类型分布',
        type: 'pie',
        radius: '50%',
        data: logStore.statisticsData.topActions.map(item => ({
          value: item.count,
          name: `${item.action} (${item.count}, ${item.percent}%)`
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  chartInstance.setOption(option);

  // 响应式调整
  window.addEventListener('resize', () => {
    chartInstance?.resize();
  });
};

// 暴露show方法
defineExpose({ show });
</script>

<template>
  <el-dialog
      v-model="dialogVisible"
      title="日志统计报表"
      width="80%"
      @close="close"
  >
    <div v-if="logStore.statisticsData" class="statistics-container">
      <!-- 统计概览 -->
      <div class="statistics-overview">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card shadow="hover">
              <div class="stat-card">
                <div class="stat-title">时间范围</div>
                <div class="stat-value">{{ logStore.statisticsData.timeRange }}</div>
              </div>
            </el-card>
          </el-col>

          <el-col :span="6">
            <el-card shadow="hover">
              <div class="stat-card">
                <div class="stat-title">日志总数</div>
                <div class="stat-value">{{ logStore.statisticsData.totalCount }}</div>
              </div>
            </el-card>
          </el-col>

          <el-col :span="6">
            <el-card shadow="hover">
              <div class="stat-card">
                <div class="stat-title">最多操作类型</div>
                <div class="stat-value">
                  {{ logStore.statisticsData.topActions[0]?.action || '无' }}
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :span="6">
            <el-card shadow="hover">
              <div class="stat-card">
                <div class="stat-title">最活跃用户</div>
                <div class="stat-value">
                  {{ logStore.statisticsData.topUsers[0]?.username || '无' }}
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 图表区域 -->
      <div class="chart-area">
        <div ref="chartRef" class="chart" style="width: 100%; height: 400px;"></div>
      </div>

      <!-- 详细数据 -->
      <div class="detail-data">
        <el-tabs type="border-card">
          <el-tab-pane label="操作类型排行">
            <el-table :data="logStore.statisticsData.topActions" border>
              <el-table-column prop="action" label="操作类型" />
              <el-table-column prop="count" label="次数" />
              <el-table-column prop="percent" label="占比(%)" />
            </el-table>
          </el-tab-pane>

          <el-tab-pane label="用户活跃度">
            <el-table :data="logStore.statisticsData.topUsers" border>
              <el-table-column prop="username" label="用户名" />
              <el-table-column prop="count" label="操作次数" />
            </el-table>
          </el-tab-pane>

          <el-tab-pane label="时段分布">
            <el-table :data="logStore.statisticsData.hourlyDistribution" border>
              <el-table-column prop="hour" label="时间段" />
              <el-table-column prop="count" label="操作次数" />
            </el-table>
          </el-tab-pane>

          <el-tab-pane label="风险操作">
            <el-table :data="logStore.statisticsData.riskOperations" border>
              <el-table-column prop="id" label="日志ID" width="80" />
              <el-table-column prop="userId" label="用户ID" width="100" />
              <el-table-column prop="action" label="操作类型" width="150" />
              <el-table-column prop="targetId" label="目标ID" width="100" />
              <el-table-column prop="time" label="操作时间" width="180" />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <div v-else class="loading">
      <el-skeleton :rows="6" animated />
    </div>
  </el-dialog>
</template>

<style scoped>
.statistics-container {
  padding: 10px;
}

.stat-card {
  text-align: center;
  padding: 10px;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.chart-area {
  margin: 20px 0;
}

.detail-data {
  margin-top: 20px;
}

.loading {
  padding: 20px;
}
</style>